<template>
  <div class="page">
    <div class="content">
      <div class="head">
        <div class="date">
          <img style="height: 80%;margin-bottom: 10px;margin-left: -15px" src="@/assets/logo.png" alt="">
        </div>
        <div class="title">
          {{ farm_type }}可视化管理平台
        </div>

        <div class="date date2" style="margin-bottom: 30px">
          {{ dateTimeText }}
        </div>
      </div>
      <div class="body">
        <div class="left">
          <Card
            class="card1"
            title="基础信息"
            icon="icon1"
          >
            <template #right>
              <div style="color: #ffffff">
                <i class="el-icon el-icon-map-location" style="font-weight: bold;color: #ffffff;font-size: 14px"></i>
                {{ farm_name }}
              </div>
            </template>
            <div style="width: 100%">
              <div style="display: flex;align-items: center;justify-content: center;margin-bottom: 10px">
                <div
                    class="card1-item"
                >
                  <div class="name">总栏目</div>
                  <div class="value">
                    <div class="value1">{{ totalNum }}</div>
                    <div class="value1 value2">个</div>
                  </div>
                </div>
                <div
                    class="card1-item"
                >
                  <div class="name">已占用</div>
                  <div class="value">
                    <div class="value1">{{ useNum }}</div>
                    <div class="value1 value2">个</div>
                  </div>
                </div>
              </div>
              <v-chart
                  style="width: 100%; height: 180px"
                  autoresize
                  :option="countOption"
              ></v-chart>
            </div>
          </Card>
          <Card icon="icon2" class="card2" title="未来3天气象预报" subtitle="">
            <div style="position:absolute;left: 0;top: 0;width: 100%">
              <iframe color="#ADE3FF" scrolling="no" src="https://widget.tianqiapi.com/?style=tg&skin=durian&color=ADE3FF&&paddingtop=10" frameborder="0" paddingtop="100" width="620" height="98" allowtransparency="true"></iframe>
            </div>
            <v-chart
                style="width: 100%; height: 100%"
                autoresize
                :option="option2"
            ></v-chart>
          </Card>
          <Card icon="icon3" class="card3" title="畜舍人车活动">
            <v-chart
                style="width: 100%; height: 100%"
                autoresize
                :option="carOption"
            ></v-chart>
          </Card>
        </div>
        <div class="center">
          <div class="center-controll">
            <el-select v-model="deviceId" @change="changeDevice">
              <el-option v-for="item in deviceList" :key="item.device_id" :value="item.device_id" :label="item.device_name"></el-option>
            </el-select>
            <el-radio-group v-model="dateType" @change="changeDate">
<!--              <el-radio-button value="" label="day">日</el-radio-button>-->
              <el-radio-button value="week" label="week">周</el-radio-button>
            </el-radio-group>
          </div>
          <div class="online-box">
            <div style="margin-right: 20px">设备状态：</div>
            <div class="online">
              {{ online }}台
            </div>
            <div class="online offline">
              {{ offline }}台
            </div>
          </div>
          <div class="video-wrapper">
            <div class="video-item">
              <video v-if="mainVideo" :src="mainVideo" controls autoplay></video>
            </div>
            <div class="video-box" style="margin: 0 -10px">
              <div class="video-item video-item2" style="margin: 0 10px">
                <video v-if="subVideo1" :src="subVideo1" controls autoplay></video>
              </div>
              <div class="video-item video-item2" style="margin: 0 10px">
                <video v-if="subVideo2" :src="subVideo2" controls autoplay></video>
              </div>
            </div>
          </div>

          <Card icon="icon3" class="card3" title="畜舍每日综合管理评估">
            <!--            <template #right>-->
            <!--              <div style="color: #ffffff;cursor:pointer;">-->
            <!--                查看更多日报-->
            <!--                <i class="el-icon el-icon-arrow-right" style="font-weight: bold;color: #ffffff;font-size: 14px"></i>-->
            <!--              </div>-->
            <!--            </template>-->
            <TextScroll :data-list="dayReportData" @cell-click="openDialog"/>
          </Card>

        </div>

        <div class="right">
          <Card
              icon="icon4"
            class="card4"
            title="畜群活跃度统计"
            subtitle=""
          >
            <v-chart
                style="width: 100%; height: 180px"
                autoresize
                :option="activeOption"
            ></v-chart>
            <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 10px">
              <div class="tag2">
                较上一天：
                <span :class="['tag2-count', activeChange.daily >= 0 ? '' : 'tag3-count']">
                  {{ activeChange.daily >= 0 ? '+' + activeChange.daily :  activeChange.daily }}
                </span>
                %
              </div>
              <div class="tag2" style="margin-right: 0">
                较上一周：
                <span :class="['tag2-count', activeChange.weekly >= 0 ? '' : 'tag3-count']">
                  {{ activeChange.weekly >= 0 ? '+' + activeChange.weekly :  activeChange.weekly }}
                </span>
                %
              </div>
            </div>
          </Card>
          <Card
              icon="icon5"
            class="card5"
            title="畜群节律统计"
            subtitle=""
          >
            <v-chart
                style="width: 100%; height: 300px"
                autoresize
                :option="animalRhythmOption"
            ></v-chart>
          </Card>
          <Card
              icon="icon6"
              class="card6"
              title="动物冷热应激预警"
              subtitle=""
          >
            <div class="item-list">
              <div class="item">
                <div class="item-text" style="font-size: 30px;margin-right: 80px">THI</div>
                <div class="item-value" :style="{ color: getWarningColorThi(warningData.thi),marginRight: '70px' }">
                  {{ warningData.thi}}
                  <div class="item-unit"></div>
                </div>
                <div class="item-text2">
                  <div style="margin-bottom: 12px">{{ warningData.temperature || 0}}°C</div>
                  <div>{{ warningData.humidity || 0}}%</div>
                </div>
              </div>
              <div class="item">
                <div class="item-text">活跃度</div>
                <div class="item-value">
                  {{ warningData.active }}
                  <div class="item-unit">%</div>
                </div>
              </div>
              <div class="item item3">
                <div class="item-text">聚散指数</div>
                <div class="item-value" :style="{ color: getWarningColor(warningData.gather) }">
                  {{ warningData.gather}}
                  <div class="item-unit">%</div>
                </div>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </div>
    <el-dialog
        width="700px"
        title="每日一报"
               :visible.sync="dialogShow1"
               append-to-body
               modal-append-to-body>
      <div style="max-height: 75vh;overflow: auto">
        <el-divider content-position="left">过去24h总结</el-divider>
        <div v-for="text in currentReport.day_summary || []" :key="text.title" style="margin-top: 6px">
          <i class="solid"></i>
          {{ text.title}}： {{ text.content}}
        </div>
        <el-divider content-position="left">动物监控与健康</el-divider>
        <div v-for="text in currentReport.animal || []" :key="text.title" style="margin-top: 6px">
          <i class="solid"></i>
          {{ text.title}}： {{ text.content}}
        </div>
        <el-divider content-position="left">设置与安全管理</el-divider>
        <div v-for="text in currentReport.manage || []" :key="text.title" style="margin-top: 6px">
          <i class="solid"></i>
          {{ text.title}}： {{ text.content}}
        </div>
        <el-divider content-position="left">未来建议</el-divider>
        <div v-for="text in currentReport.suggestions || []" :key="text.title" style="margin-top: 6px">
          <i class="solid"></i>
          {{ text.title}}： {{ text.content}}
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {showTime} from "../utils";
import Card from "../Card.vue";
import TextScroll from "../TextScroll.vue";

const fontColor = "#55C1FF";
const fontSize = 16
const fontWeight = 500
import * as echarts from "echarts";
import axios from "axios";
import dayjs from "dayjs";

export default {
  components: {
    Card,
    TextScroll,
  },
  data() {
    return {
      farmId: 2,
      farm_name: '',
      farm_type: '',
      deviceId: '',
      deviceList: [],
      dateType: 'week',
      dateTimeText: "",
      totalNum: 0,
      useNumRate: 1,
      option2:  {

      },
      dayReportData: [
      ],
      currentReport: {},
      dialogShow1: false,
      // 主视频
      mainVideo: '',
      // 动物识别视频
      subVideo1: '',
      // 活动轨迹视频
      subVideo2: '',
      // 动物汇总数据
      animalCountData: [],
      // 活跃度数据
      activeData:  {
        xData: [
        ],
        seriesData: [
        ],
      },
      // 活跃度变化
      activeChange: {
        daily: '',
        weekly: ''
      },
      // 节律数据
      animalRhythmData:  {
        xData: [
        ],
        seriesData: [
          {
            id: 'Resting',
            name: '睡眠',
            data: [],
            color: '#00eff2',
          },
          {
            id: 'Drinking',
            name: '饮水',
            color: '#02C9FF',
            data: [],
          },
          {
            id: 'Feeding',
            name: '进食',
            color: '#FCBF05',
            data: [],
          },
          {
            id: 'Normal',
            name: '活动',
            color: '#03E579',
            data: [],
          }
        ]
      },
      // 预警数据
      warningData: {
        thi: 0,
        active: 0,
        gather: 0,
        // 温度
        temperature: 0,
        // 湿度
        humidity: 0,
      },
      carOption: {
        tooltip: {
          show: true,
          trigger: "item",
        },
        grid: {
          left: 30,
          right: 10,
          top: 0,
          bottom: -5,
          containLabel: true,
        },
        xAxis: [
          {
            axisLabel: {

              color: fontColor,
              fontSize: fontSize,
              fontWeight: fontWeight,
              margin: 10,
              rotate: 45,
              showMaxLabel: true
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#0093A7",
              },
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: "#00FFFF",
              },
            },
            splitLine: {
              show: false,
            },
            data: [],
            // 为时间轴 时分格式
            type: 'category'
          },
        ],
        yAxis: [
          {
            position: 'right',
            axisLabel: {

              color: fontColor,
              fontSize: fontSize,
              fontWeight: fontWeight
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#0093A7",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(0, 147, 167, .18)",
              },
            },
            data: []
          },
        ],
        series: [
          {
            // symbol: 'rect',
            symbolSize: 10,
            itemStyle: {
              color: '#F4AD14'
            },
            data: [
            ],
            type: 'scatter'
          }
        ]
      }
    };
  },
  computed: {
    useNum() {
      return Math.floor(this.totalNum * this.useNumRate)
    },
    online() {
      return this.deviceList.filter(item => item.status === 1).length
    },
    offline() {
      return this.deviceList.filter(item => item.status === 0).length
    },
    countOption() {
      return {
        grid: {
          left: 5,
          right: 30,
          top: 20,
          bottom: "0%",
          containLabel: true,
        },
        tooltip: {
          show: true,
          trigger: "axis",
        },
        legend: {
          show: false,
          bottom: 0,
          data: this.animalCountData.map((el) => {
            return {
              name: el.name,
              textStyle: {
                color: el.color,
              },
            };
          }),
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            axisLabel: {

              color: fontColor,
              fontSize: fontSize,
              fontWeight: fontWeight,
              margin: 10,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#0093A7",
              },
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: "#00FFFF",
              },
            },
            splitLine: {
              show: false,
            },
            data: this.animalCountData.map(item => item.name )
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            axisLabel: {

              color: fontColor,
              fontSize: fontSize,
              fontWeight: fontWeight
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#0093A7",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(0, 147, 167, .18)",
              },
            },
          },
        ],
        series: [
          {
            name: '栏目占用',
            type: "line",
            itemStyle: {
              normal: {
                color: '#00FFFF',
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(0, 255, 255, 0.3)",
                  },
                  {
                    offset: 0.8,
                    color: "rgba(0, 255, 255, 0)",
                  },
                ]),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            label: {
              show: true,
              textStyle: {
                color: '#00eff2'
              },
              position: 'top'
            },
            data: this.animalCountData
          }
        ]
      }
    },
    activeOption() {
      return {
        grid: {
          left: "0%",
          right: "5%",
          top: 30,
          bottom: "0%",
          containLabel: true,
        },
        tooltip: {
          show: true,
          trigger: "item",
        },
        legend: {
          show: false,
          bottom: 0,
          data: this.activeData.seriesData.map((el) => {
            return {
              name: el.name,
            };
          }),
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            axisLabel: {

              color: fontColor,
              fontSize: fontSize,
              fontWeight: fontWeight,
              margin: 10,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#0093A7",
              },
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: "#00FFFF",
              },
            },
            splitLine: {
              show: false,
            },
            data: this.activeData.xData
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            axisLabel: {

              color: fontColor,
              fontSize: fontSize,
              fontWeight: fontWeight
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#0093A7",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(0, 147, 167, .18)",
              },
            },
          },
        ],
        series: this.activeData.seriesData.map((el) => {
          return {
            name: el.name,
            type: 'line',
            barWidth: 20,
            itemStyle: {
              color: 'rgb(103, 224, 227)',
              borderColor: 'rgb(103, 224, 227)',
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(0, 255, 255, 0.3)",
                  },
                  {
                    offset: 0.8,
                    color: "rgba(0, 255, 255, 0)",
                  },
                ]),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },

            label: {
              show: true,
              textStyle: {
                color: '#00eff2'
              },
              formatter: function (params) {
                return params.value + '%'
              },
              position: 'top'
            },
            // data取中间数字
            data: el.data.map(item => item[2]),
          };
        }),
      }
    },
    animalRhythmOption() {
      return {
        grid: {
          left: 20,
          right: 20,
          top: 80,
          bottom: 10,
          containLabel: true,
        },
        tooltip: {
          show: true,
          trigger: "axis",
        },
        legend: {
          show: true,
          top: 20,
          right: 10,
          itemWidth: 25,
          itemHeight: 10,
          data: this.animalRhythmData.seriesData.map((el) => {
            return {
              name: el.name,
              itemStyle: {
                color: el.color,
              },
              textStyle: {
                color: '#fff'
              }
            };
          }),
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            axisLabel: {

              color: fontColor,
              fontSize: fontSize,
              fontWeight: fontWeight,
              margin: 10,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#0093A7",
              },
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: "#00FFFF",
              },
            },
            splitLine: {
              show: false,
            },
            data: this.animalRhythmData.xData
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            axisLabel: {

              color: fontColor,
              fontSize: fontSize,
              fontWeight: fontWeight
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#0093A7",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(0, 147, 167, .18)",
              },
            },
          },
        ],
        series: this.animalRhythmData.seriesData.map((el) => {
          return {
            name: el.name,
            type: "bar",
            barWidth: 20,
            stack: 1,
            itemStyle: {
              normal: {
                barRadius: [4, 4, 0, 0],
                color: el.color
              },
            },
            data: el.data,
          };
        }),
      }
    }
  },
  methods: {
    getWeather() {
      axios.get('http://v1.yiketianqi.com/free/week?vue=1&unescape=1&appid=47276687&appsecret=EhPb1e2m').then(res => {
        console.log('温度',res)

        const option2Data = [
          {
            name: "温度",
            data:  res.data.data.map(item => item.tem_day),
            color: "#00eff2",
          },
        ];
        this.option2 = {
          grid: {
            left: 0,
            right: 15,
            top: 70,
            bottom:0,
            containLabel: true,
          },
          tooltip: {
            show: true,
            trigger: "axis",
            // 文字拼接温度单位
            formatter: function (params) {
              let res = params[0].name + "<br/>";
              for (let i = 0; i < params.length; i++) {
                res += params[i].marker + params[i].seriesName + "：" + params[i].value + "℃<br/>";
              }
              return res;
            },
          },
          legend: {
            show: false,
            bottom: 0,
            data: option2Data.map((el) => {
              return {
                name: el.name,
                textStyle: {
                  color: el.color,
                },
              };
            }),
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: true,
              axisLabel: {
                color: fontColor,
                fontSize: fontSize,
                fontWeight: fontWeight,
                margin: 10,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#0093A7",
                },
              },
              axisTick: {
                show: true,
                lineStyle: {
                  color: "#00FFFF",
                },
              },
              splitLine: {
                show: false,
              },
              data: res.data.data.map(item => item.date),
            },
          ],
          yAxis: [
            {
              type: "value",
              name: '℃',
              axisLabel: {

                color: fontColor,
                fontSize: fontSize,
                fontWeight: fontWeight
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#0093A7",
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "rgba(0, 147, 167, .18)",
                },
              },
            },
          ],
          series: option2Data.map((el) => {
            return {
              name: el.name,
              type: "line",
              itemStyle: {
                normal: {
                  color: el.color,
                },
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgba(0, 255, 255, 0.3)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(0, 255, 255, 0)",
                    },
                  ]),
                  shadowColor: "rgba(0, 0, 0, 0.1)",
                  shadowBlur: 10,
                },
              },
              label: {
                show: true,
                textStyle: {
                  color: '#00eff2'
                },
                position: 'top',
                // 加摄氏度
                formatter: function (params) {
                  return params.value + '℃'
                }
              },
              data: el.data,
            };
          }),
        }
      })
    },

    getFarmInfo() {
      axios.get('/api/farm/' + this.farmId).then(res => {
        this.farm_name = res.data.data.farm_name
        this.totalNum = res.data.data.pen_nums
      })
    },
    getDeviceList() {
      axios.get('/api/farm/device/list?farmId=' + this.farmId).then(res => {
        this.deviceList = res.data.data
        if (this.deviceList.length) {
          this.deviceId = this.deviceList[0].device_id
          this.changeDevice(this.deviceId)
        }
      })
    },
    changeDevice() {
      this.setData()
    },
    openDialog(item) {
      this.currentReport = item
      this.dialogShow1 = true
    },
    // 切换周日
    changeDate() {
      this.setData()
    },
    // 当日往前一周的数据
    async setData() {
      let currentDate = dayjs().format('YYYY-MM-DD')
      // 重写静态时间
      currentDate = '2024-11-20'
      let currentDateText = dayjs(currentDate).format('MM月D日')
      /**
       * 视频
       */
      axios.get(`/api/farm/video/list?deviceId=${this.deviceId}&farmId=${this.farmId}&date=${currentDate}`).then(res => {
        let videoList = res.data.data
        this.mainVideo = videoList.find(item => item.type === '监控')?.video_url
        this.subVideo1 = videoList.find(item => item.type === '动物识别')?.video_url
        this.subVideo2 = videoList.find(item => item.type === '活动轨迹')?.video_url
      })
      /**
       * 数据
       * @type {axios.AxiosResponse<any>}
       */
      let dailyDetail = null
      const res = await axios.get(`/api/farm/summary?deviceId=${this.deviceId}&farmId=${this.farmId}&date=${currentDate}&dateType=${this.dateType}`)
      let resData = res.data.data
      if (resData && resData.data && resData.data.CameraDailyOverview) {
        dailyDetail = resData.data.CameraDailyOverview
      }
      if (dailyDetail)  {
        const { car_events } = dailyDetail
        /**
         * 人车
         * 每天对应每个时间点，只要存在数据，就会出现一个时间点，数据默认是1
         */
        if (car_events) {
          let carDate = Object.keys(car_events)
          let carHour = []
          let data = []
          // 每天对应每个时间点，只要存在数据，就会出现一个时间点，数据默认是1
          carDate.forEach(date => {
            let hourData = car_events[date]
            // hourData是时分，出现该时间点说明存在一条数据
            hourData.forEach(hour => {
              // 查找是否存在
              let findIndex = carHour.findIndex(item => item === hour)
              if (findIndex === -1) {
                carHour.push(hour)
              }
              // 数据
              data.push([hour, date, 1])
            })
          })
          // carHour 时分排序
          carHour = carHour.sort((a, b) => {
            return a.localeCompare(b)
          })
          // data 按日期+时间排序
          data = data.sort((a, b) => {
            let aSort = a[1] + ' ' + a[0]
            let bSort = b[1] + ' ' + b[0]
            return aSort.localeCompare(bSort)
          })
          this.carOption.xAxis[0].data = carHour
          this.carOption.yAxis[0].data = carDate
          this.carOption.series[0].data = data
        }
        /**
         * 日报
         */
        const { daily_ai_report } = dailyDetail
        if (daily_ai_report) {
          for (const daily_ai_report_key in daily_ai_report) {
            let jsonStr = daily_ai_report[daily_ai_report_key]
            let json = JSON.parse(jsonStr)
            this.dayReportData.push({
              date: dayjs(daily_ai_report_key).format('YYYY年MM月DD日'),
              ...json
            })
          }
        }
        /**
         * 1. 基础信息
         */
        const { penOccupancyRate, animalCount } = dailyDetail
        if (penOccupancyRate) {
          // 已占用
          this.useNumRate = penOccupancyRate[dayjs(currentDate).format('MM月DD日')] || 0
        }
        if (animalCount) {
          // 数量
          let animalCountData = []
          for (const animalCountKey in animalCount) {
            animalCountData.push({
              name: animalCountKey,
              value: animalCount[animalCountKey].sheep
            })
          }
          // 按日期排序
          this.animalCountData = animalCountData.sort((a, b) => {
            return new Date(a.date).getTime() - new Date(b.date).getTime()
          })
        }
        /**
         * 2. 活跃度
         */
        const { animalActivity = {}, animalActivityChange = {} } = dailyDetail
        let activeData = []
        for (const activeDataKey in animalActivity) {
          activeData.push({
            name: activeDataKey,
            value: animalActivity[activeDataKey],
          })
        }
        // 日期排序
        activeData = activeData.sort((a, b) => {
          return new Date(a.date).getTime() - new Date(b.date).getTime()
        })
        this.activeData = {
          xData: activeData.map(item => item.name),
          seriesData: [
            {
              name: '畜群活跃度统计',
              data: activeData.map(item => item.value),
            }
          ]
        }
        this.activeChange = {
          daily: animalActivityChange.daily || 0,
          weekly: animalActivityChange.weekly || 0,
        }
        /**
         * 节律
         */
        const { animalRhythm = {} } = dailyDetail
        let rhythmData = animalRhythm
        let rhythmList = []
        for (const rhythmDataKey in rhythmData) {
          rhythmList.push({
            name: rhythmDataKey,
            drink: rhythmData[rhythmDataKey].Drinking,
            eat: rhythmData[rhythmDataKey].Feeding,
            sleep: rhythmData[rhythmDataKey].Resting,
            active: rhythmData[rhythmDataKey].Normal,
          })
        }
        // 日期排序
        rhythmList = rhythmList.sort((a, b) => {
          return new Date(a.date).getTime() - new Date(b.date).getTime()
        })
        this.animalRhythmData = {
          xData: rhythmList.map(item => item.name),
          seriesData: [
            {
              id: 'Resting',
              name: '睡眠',
              data: rhythmList.map(item => item.sleep),
              color: '#00eff2',
            },
            {
              id: 'Drinking',
              name: '饮水',
              color: '#02C9FF',
              data: rhythmList.map(item => item.drink),
            },
            {
              id: 'Feeding',
              name: '进食',
              color: '#FCBF05',
              data: rhythmList.map(item => item.eat),
            },
            {
              id: 'Normal',
              name: '活动',
              color: '#03E579',
              data: rhythmList.map(item => item.active),
            }
          ]
        }
        /**
         * 动物冷热应激预警
         */
        const { THI = {}, temperature = {}, humidity = {}, convergence_index = {} } = dailyDetail
        this.warningData = {
          thi: (THI[currentDateText] || 0).toFixed(0),
          // TODO 活跃度
          active: animalActivity[currentDateText] ? animalActivity[currentDateText][2] : 0,
          // TODO 聚散指数
          gather: convergence_index[currentDateText] || 0,
          temperature: temperature[currentDateText] || 0,
          humidity: humidity[currentDateText] || 0,
        }
      }
    },
    getWarningColorThi(value) {
      // 红色代表热（ THI>72 ），绿色舒适区（25<=THI<=72），蓝色代表冷（ THI<25 ）
      if (value > 72) {
        return '#FF0000'
      } else if (value >= 25 && value <= 72) {
        return '#00FF00'
      } else {
        return '#0000FF'
      }
    },
    // 聚散指数
    getWarningColor(value) {
      // 红色代表极端聚集（ ＞80％ ）或极端分散（ ＜30% ），绿色代表舒适区（ 30 % -80%
      if (value > 80) {
        return '#FF0000'
      } else if (value >= 30 && value <= 80) {
        return '#00FF00'
      } else {
        return 'rgba(119,61,190)'
      }
    },
  },
  mounted() {
    this.farm_type = this.$route.query.farm_type || this.farm_type
    this.farmId = this.$route.query.farm_id || this.farmId
    this.getFarmInfo()
    this.getDeviceList()
    this.getWeather()
    setInterval(() => {
      this.dateTimeText = showTime();
    }, 1000); //间隔多少毫秒执行一次这个方法
  },
};
</script>

<style lang="less">
//::-webkit-scrollbar {
//  width: 10px !important;
//}
//::-webkit-scrollbar-thumb {
//  background-color: rgba(0, 147, 167, 0.8);
//  height: 10px!important;
//  border-radius: 1.786px!important;
//}
//::-webkit-scrollbar-track {
//  background-color: #0e222e;
//}
.el-dialog {
  display: block;
  box-sizing: border-box;
  overflow: auto;
  background-color: rgba(0, 147, 167, 0.9) !important;

  .solid {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #ffffff;
    border-radius: 50%;
    margin-right: 6px;
    margin-bottom: 1px;
  }
  .el-dialog__headerbtn {
    top: 10px;
  }
  .el-dialog__close {
    font-size: 28px;
  }
  .el-dialog__headerbtn .el-dialog__close,
  .el-dialog__title {
    color: #ffffff;
  }
  .el-dialog__body {
    padding: 20px;
    color: #ffffff;
  }
}
@font-face {
  font-family: "HuXiaoBo-NanShen-Regular";
  src: url("~@/assets/HuXiaoBoNanShenTi-2.otf");
}

@font-face {
  font-family: "Source Han Sans CN-Medium";
  src: url("~@/assets/SourceHanSansSC-Medium-2.otf");
}
@font-face {
  font-family: "Source Han Sans CN";
  src: url("~@/assets/SourceHanSansSC-Regular-2.otf");
}
.el-select-dropdown__item.selected {
  color: #55C1FF !important;
}
.card-body {
  position: relative;
}
.page {
  background-image: url("~@/assets/bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 15px;
  .el-input__inner {
    background-color: rgba(0, 147, 167, 0.8);
    border-color: rgba(0, 147, 167, 0.8);
    color: #ffffff;
  }
  .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    background-color: rgba(0, 147, 167, 0.8);
    border-color: rgba(0, 147, 167, 0.8);
    color: #ffffff;
    box-shadow:-1px 0 0 0 rgba(0, 147, 167, 0.8);
  }
  .el-range-editor.is-active, .el-range-editor.is-active:hover, .el-select .el-input.is-focus .el-input__inner  {
    border-color: rgba(0, 147, 167, 0.8);
  }
  .map {
    // background-image: url("~@/assets/map.png");
    //background-size: 100% 100%;
    //background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    width:100%;
    height: 100%;
    z-index: 0;
  }
  .content {
    height: 100%;
    background-image: url("~@/assets/head.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 0 30px 23px 30px;
    color: #fff;
    position: relative;
    z-index: 1;
    .head {
      height: 87px;
      display: flex;
      justify-content: space-between;
      .date {
        width: 400px;
        line-height: 130px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        font-size: 21px;
        left: 21px;
        font-family: HuXiaoBo-NanShen-Regular, HuXiaoBo-NanShen;
        font-weight: 400;
        color: #55c1ff;
        margin-bottom: 20px;
      }
      .date2 {
        justify-content: flex-end;
        img {
          margin-right: 20px;
        }
      }
      .title {
        font-size: 36px;
        line-height: 25px;
        font-family: HuXiaoBo-NanShen-Regular, HuXiaoBo-NanShen;
        font-weight: 400;
        color: #00eff2;
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        // line-height: 87px;
        // text-align: center;
        img {
          margin-bottom: 12px;
        }
      }
    }
    .body {
      height: calc(100% - 87px);
      display: flex;
      justify-content: space-between;
    }
  }
  .left {
    width: 500px;
    display: flex;
    flex-direction: column;
  }
  .card1 {
    .card-body {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .card1-item {
      width: 143px;
      height: 55px;
      background-image: url("~@/assets/组.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 8px 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin: 0 20px;
      .name {
        font-size: 12px;
        font-weight: 500;
        color: #ffffff;
      }
      .value {
        display: flex;
        align-items: flex-end;
        .value1 {
          font-size: 18px;
          line-height: 18px;
          font-weight: 400;
          color: #00eff2;
        }
        .value2 {
          font-size: 12px;
          line-height: 12px;
          margin-bottom: 2px;
          margin-left: 6px;
          color: rgba(255, 255, 255, 0.5);
        }
      }
    }
  }
  .card2 {
    height: 280px;
  }
  .card3 {
    height: 300px;
    margin-bottom: 0;
  }

  .right {
    width: 519px;
    display: flex;
    flex-direction: column;
    .tag2 {
      font-size: 18px;
      font-family: SourceHanSansCN;
      font-weight: 500;
      color: #54b1ff;
      line-height: 32px;
    }
    .tag2-count {
      font-size: 25px;
      color: #ffdd54;
      line-height: 48px;
    }
    .tag3-count {
      color: #e01d1d;
    }
  }
  .card5 {
    flex-grow: 1;
    padding-bottom: 0;
    pointer-events: auto;
    .card-body {
      padding: 10px 0;
    }
    .book-rank-table {
      width: 100%;
      th {
        color: #fff;
      }
      th,
      td {
        font-size: 16px;
        font-weight: 500;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        text-overflow: ellipsis;
        text-align: center;
        line-height: 28px;
        color: #55C1FF;
        .index {
          width: 80px;
        }
        .name {
          width: 230px;
        }
        .author {
          width: 120px;
        }
        .count {
          width: 100px;
        }
      }
      tr {
        cursor: pointer;
      }
      tr:hover {
        td {
          color: #FFB451 !important;
        }
      }
    }
  }

  .center {
    flex-grow: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    padding-bottom: 4px;
    .center-controll {
      flex-grow: 1;
      padding: 10px 0 20px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .online-box {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 16px;
      .online {
        color: #ffffff;
        position: relative;
        padding-left: 30px;
        height: 32px;
        line-height: 32px;
        margin-right: 20px;
        &::after {
          display: inline-block;
          content: ' ';
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background-color: #00eff2;
          position: absolute;
          left: 0;
          top: 55%;
          transform: translateY(-50%);
        }
      }
      .offline::after {
        background-color: #ff0000;
      }
    }
    .video-wrapper {
      background-color: rgba(0, 147, 167, 0.2);
      padding: 16px;
    }
    video {
      width: 100%;
      height: 100%;
      object-fit: fill
    }
    .video-box {
      display: flex;
      align-items: center;
    }
    .video-item {
      margin-bottom: 20px;
      width: 100%;
      height: 300px;
      background-color: rgba(0, 147, 167, 0.2);
    }
    .video-item2 {
      height: 280px;
    }
    .box1 {
      position: absolute;
      right: 65px;
      top: 30px;
      width: 209px;
      height: 157px;
      background: rgba(0, 147, 167, 0.2);
      border-radius: 0px 0px 0px 0px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .name {
        text-align: center;
        height: 16px;
        font-size: 16px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #ffffff;
        margin-bottom: 20px;
      }
      .box1-item {
        width: 100%;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        img {
          width: 30px;
          height: 28px;
          margin-right: 14px;
        }
        .value {
          flex-grow: 1;
          display: flex;
          align-items: center;
          font-size: 23px;
          line-height: 28px;
          font-family: Source Han Sans CN-Medium, Source Han Sans CN;
          font-weight: 500;
          .value1 {
            margin-right: 24px;
          }
        }
      }
      .box1-item1 {
        color: rgba(0, 189, 126, 1);
      }
      .box1-item2 {
        color: rgba(85, 193, 255, 1);
        margin-bottom: 0;
      }

      .left1 {
        position: absolute;
        left: -3px;
        top: -3px;
        width: 32px;
        height: 33px;
        background-image: url("~@/assets/left.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .left2 {
        position: absolute;
        left: -3px;
        bottom: -3px;
        width: 32px;
        height: 33px;
        background-image: url("~@/assets/left2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .right1 {
        position: absolute;
        right: -3px;
        top: -3px;
        width: 32px;
        height: 33px;
        background-image: url("~@/assets/right.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .right2 {
        position: absolute;
        right: -3px;
        bottom: -3px;
        width: 32px;
        height: 33px;
        background-image: url("~@/assets/right2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }

    .box2 {
      top: initial;
      left: 45px;
      bottom: 27px;
      width: 265px;
      height: 290px;
      padding:5px 17px;
      justify-content: flex-start;

      .name {
        margin-bottom: 0;
      }
      .box2-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        width: 100%;
        .box2-item-name {
          height: 16px;
          font-size: 16px;
          line-height: 16px;
          font-family: Source Han Sans CN-Medium, Source Han Sans CN;
          font-weight: 500;
          color: #55c1ff;
        }
        .box2-item-value {
          height: 16px;
          font-size: 16px;

          line-height: 16px;
          font-family: Source Han Sans CN-Medium, Source Han Sans CN;
          font-weight: 500;
          color: rgba(0, 189, 126, 1);
        }
      }
    }

    .box3 {
      position: absolute;
      right: 125px;
      bottom: 80px;
      .name {
        line-height: 16px;
        font-size: 16px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #ffffff;
        margin-bottom: 30px;
      }
      .box3-item {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        .icon {
          width: 20px;
          height: 20px;
          margin-right: 15px;
          background-image: url("~@/assets/组 21@2x.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        .text {
          line-height: 16px;
          font-size: 16px;
          font-family: Source Han Sans CN-Medium, Source Han Sans CN;
          font-weight: 500;
          color: rgba(180, 180, 180, 1);
        }
      }
      .box3-item.active {
          .icon {
            line-height: 16px;
            height: 20px;
            margin-right: 15px;
            background-image: url("~@/assets/组 20@2x.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }
          .text {
            line-height: 16px;
            font-size: 16px;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            font-weight: 500;
            color: #00ffff;
          }
      }
    }
  }
  .item-list {
    padding: 20px 0 30px 0;
    display: flex;
    margin-top: 12px;
    margin-bottom: 12px;
    .item {
      flex: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      .item-text2 {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
      }
      &::after {
        display: inline-block;
        content: ' ';
        width: 1px;
        height: 48px;
        background: #098389;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
      }
      &.item3 {
        &::after {
          display: none;
        }
      }
    }
    .item-text {
      font-size: 26px;
      font-family: SourceHanSansCN;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 14px;
      margin-bottom: 18px;
    }
    .item-value {
      font-size: 32px;
      font-family: SourceHanSansCN;
      font-weight: bold;
      color: #F4AD14;
      line-height: 32px;
      display: flex;
      &.red {
        color: #FF0000;
      }
    }
    .item-unit {
      font-size: 26px;
      line-height: 32px;
      color: rgba(255, 255, 255, 0.5);
      margin-top: 3px;
      margin-left: 6px;
    }
  }
}
</style>
